Object syntax
The Object in JavaScript is one of the most important and widely used data types. An object is a collection of properties, and a property is an association between a key (or name) and a value.
Creating an Object
There are several ways to create an object in JavaScript:
Object Literal
let obj = { key: "value", key2: "value2" };
Using new Object()
let obj = new Object();
obj.key = "value";
Using Object.create()
let prototype = { key: "value" };
let obj = Object.create(prototype);
Common Methods of Object
Object.assign()
This method copies all enumerable own properties from one or more source objects to a target object.
let target = { a: 1 };
let source = { b: 2, c: 3 };
let returnedTarget = Object.assign(target, source);
console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget); // { a: 1, b: 2, c: 3 }
Object.create()
This method creates a new object, using an existing object as the prototype of the newly created object.
let person = {
isHuman: false,
printIntroduction: function () {
console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
},
};
let me = Object.create(person);
me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten
me.printIntroduction(); // "My name is Matthew. Am I human? true"
Object.defineProperty()
This method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
let obj = {};
Object.defineProperty(obj, "key", {
value: "static",
writable: false,
enumerable: true,
configurable: true,
});
console.log(obj.key); // "static"
Object.defineProperties()
This method defines new or modifies existing properties directly on an object, returning the object.
let obj = {};
Object.defineProperties(obj, {
property1: {
value: true,
writable: true,
},
property2: {
value: "Hello",
writable: false,
},
});
console.log(obj.property1); // true
console.log(obj.property2); // "Hello"
Object.entries()
This method returns an array of a given object's own enumerable string-keyed property [key, value] pairs.
let obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]
Object.freeze()
This method freezes an object. A frozen object can no longer be changed.
let obj = {
prop: function () {},
foo: "bar",
};
Object.freeze(obj);
obj.foo = "baz"; // Fails silently in non-strict mode
console.log(obj.foo); // "bar"
Object.fromEntries()
This method transforms a list of key-value pairs into an object.
let entries = [
["foo", "bar"],
["baz", 42],
];
let obj = Object.fromEntries(entries);
console.log(obj); // { foo: "bar", baz: 42 }
Object.getOwnPropertyDescriptor()
This method returns a property descriptor for a named property on an object.
let obj = { a: 1 };
let descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor);
// { value: 1, writable: true, enumerable: true, configurable: true }
Object.getOwnPropertyDescriptors()
This method returns all own property descriptors of a given object.
let obj = { a: 1, b: 2 };
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/*
{
a: { value: 1, writable: true, enumerable: true, configurable: true },
b: { value: 2, writable: true, enumerable: true, configurable: true }
}
*/
Object.getOwnPropertyNames()
This method returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly in a given object.
let obj = { a: 1, b: 2, c: 3 };
console.log(Object.getOwnPropertyNames(obj)); // ["a", "b", "c"]
Object.getOwnPropertySymbols()
This method returns an array of all symbol properties found directly upon a given object.
let obj = {};
let sym = Symbol("foo");
obj[sym] = "bar";
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(foo)]
Object.getPrototypeOf()
This method returns the prototype (i.e., the value of the internal [[Prototype]] property) of the specified object.
let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // true
Object.is()
This method determines whether two values are the same value.
console.log(Object.is("foo", "foo")); // true
console.log(Object.is({}, {})); // false
Object.isExtensible()
This method determines if an object is extensible (i.e., whether new properties can be added to it).
let obj = {};
console.log(Object.isExtensible(obj)); // true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // false
Object.isFrozen()
This method determines if an object is frozen.
let obj = Object.freeze({});
console.log(Object.isFrozen(obj)); // true
Object.isSealed()
This method determines if an object is sealed.
let obj = Object.seal({});
console.log(Object.isSealed(obj)); // true
Object.keys()
This method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.
let obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ["a", "b", "c"]
Object.preventExtensions()
This method prevents new properties from ever being added to an object (i.e., prevents future extensions to the object).
let obj = {};
Object.preventExtensions(obj);
obj.newProp = "new value"; // Fails silently in non-strict mode
console.log(obj.newProp); // undefined
Object.seal()
This method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.
let obj = { prop: "value" };
Object.seal(obj);
obj.newProp = "new value"; // Fails silently in non-strict mode
console.log(obj.newProp); // undefined
obj.prop = "new value"; // Works because the property is still writable
console.log(obj.prop); // "new value"
Object.setPrototypeOf()
This method sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null.
let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // true
Object.values()
This method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop.
let obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]
Conclusion
The Object in JavaScript provides a plethora of methods to interact with objects, modify them, and retrieve information. Understanding these methods is crucial for effectively working with objects in JavaScript.